<?php
use yii\helpers\Url;

$web = Url::base();

$this->title = '选择商城';
?>

<link rel="stylesheet" type="text/css" href="<?= $web ?>/css/mall-m/card-select.css"/>

<style type="text/css">
    .shop-select {
        background: url(<?= $web ?>/images/mall-m/shop-background.png) no-repeat;
        background-size: cover;
    }

    .into-btn {
        -webkit-mask: url(<?= $web ?>/images/mall-m/shop-mask.png);
        -webkit-mask-size: cover;
    }

    .heade .title {
        background: url(<?= $web ?>/images/mall-m/scan-title-bg.png) no-repeat;
        background-size: cover;
    }

    .dora-card .title {
        background: url(<?= $web ?>/images/mall-m/scan-dora1-bg.png) no-repeat;
        background-size: cover;
    }

    .dora-block .title {
        background: url(<?= $web ?>/images/mall-m/scan-dora-bg2.png) no-repeat;
        background-size: cover;
    }

    .shop-select {
        width: 12.25rem;
        height: 5.5rem;
        background: url(<?= $web ?>/images/mall-m/shop-slect-bg2.png) no-repeat;
        background-size: cover;
        margin: 0 auto;
        margin-top: 1.65rem;
        overflow: hidden;
        position: relative;
    }

    .shop-select .institution {
        margin-top: .95rem;
        margin-left: 1.75rem;
        height: .725rem;
    }

    .shop-select .institution img {
        width: .725rem;
        height: .725rem;
    }

    .shop-select .institution p {
        width: 8.2rem;
        height: .725rem;
        color: #FFFFFF;
        font-size: .6rem;
        line-height: .725rem;
        margin-left: 1.25rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .shop-select .balance {
        margin-top: .575rem;
        margin-left: 1.75rem;
        height: .725rem;
    }

    .shop-select .balance img {
        width: .725rem;
        height: .725rem;
    }

    .shop-select .balance p {
        color: #FFFFFF;
        font-size: .5rem;
        line-height: .725rem;
        margin-left: 1.25rem;
    }

    .into-btn {
        width: 12.25rem;
        height: 1.8rem;
        text-align: center;
        line-height: 1.8rem;
        font-size: .7rem;
        color: #FFFFFF;
        background: rgba(225, 0, 56, 0.5);
        -webkit-mask: url(<?= $web ?>/images/mall-m/shop-select-btn-bg2.png);
        -webkit-mask-size: cover;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .into-btn:active {
        background: #ff295b;
    }


</style>

<div class="main">
    <?php
    if (count($items) > 0) {
        foreach ($items as $item) {
            ?>
            <div class="shop-select">
                <div class="institution">
                    <img class="f-l" src="<?= $web ?>/images/mall-m/shop-select-institution2.png"/>
                    <p class="f-l"><?= $item['site_name'] ?></p>
                </div>
                <div class="balance">
                    <img class="f-l" src="<?= $web ?>/images/mall-m/shop-select-balance2.png"/>
                    <p class="f-l">余额：<span><?= floor($item['integral']) . ' ' . $item['integral_unit'] ?></span></p>
                </div>
                <a href="index?institution_code=<?= $item['institution_code'] ?>">
                    <p class="into-btn">进入商城</p>
                </a>
            </div>
            <?php
        }
    } else {
        ?>
        <div class="none-card">
            <div class="heade">
                <img src="<?= $web ?>/images/mall-m/scan-dora-img.jpg"/>
                <p class="title">
                    请打开微信扫一扫
                </p>
            </div>
            <div class="dora-card">
                <p class="title">朵拉名片上的二维扫码</p>
                <div class="card-img">
                    <img src="<?= $web ?>/images/mall-m/scan-dora-img1.png"/>
                    <img src="<?= $web ?>/images/mall-m/scan-dora-img2.png"/>
                </div>
            </div>
            <div class="or">
                <img src="<?= $web ?>/images/mall-m/scan-icon.png"/>
            </div>
            <div class="dora-block">
                <p class="title">朵拉卡上的二维扫码</p>
                <div class="card-img">
                    <img src="<?= $web ?>/images/mall-m/scan-dora-img3.png"/>
                    <img src="<?= $web ?>/images/mall-m/scan-dora-img4.png"/>
                </div>
            </div>
        </div>
        <?php
    }
    ?>
</div>
